<template>
  <view>
    <!-- 2.0.19支持autoBack，默认为false -->
    <u-navbar
        title=""
        :autoBack="true"
    >
      <template #center>
        <view class="sort-button" v-if="showSortButton && commentList.child != undefined" @tap="getCommentSort"
              style="display: flex;align-items: center;
            justify-content: space-between;padding: 30rpx 30rpx 0 30rpx">
          <!--          <text style="color: black">回复</text>-->
          <view v-if="commentSort" style="display: flex;align-items: center">
            <text>时间</text>&nbsp;
            <image style="width: 15px;height: 15px;" src="https://www.douluodalu.icu:9000/school/static/sort-time.png"></image>
          </view>
          <view v-else style="display: flex;align-items: center">
            <text>热度</text>&nbsp;
            <image style="width: 15px;height: 15px;" src="https://www.douluodalu.icu:9000/school/static/sort-hot.png"></image>
          </view>
        </view>

      </template>
    </u-navbar>
  </view>
  <reply-skeleton v-if="loading"></reply-skeleton>
  <view class="wrap" style="padding-top: 80px ">
    <view class="comment">
      <view class="top">
        <view class="left">
          <view class="heart-photo">
            <image @tap.stop="toUserInfo(commentList.userId)" :src="commentList.avatar" mode=""></image>
          </view>
          <view class="user-info">
            <view @tap.stop="toUserInfo(commentList.userId)" class="name">{{ commentList.username }}</view>
            <view class="date">
              {{ formatTimeAgo(commentList.publishTime) }}
              {{ formatLocation(commentList.location) }}
            </view>
          </view>
        </view>
        <view class="right" :class="{ highlight: commentList.isLike }">
          {{ commentList.liked }}&nbsp;
          <image v-if="!commentList.isLiked" class="like-image" src="https://www.douluodalu.icu:9000/school/static/like.png"
                 @tap.stop="getRootCommentLike()"></image>
          <image v-if="commentList.isLiked" class="like-image"
                 src="https://www.douluodalu.icu:9000/school/static/like_active.png"
                 @tap.stop="getRootCommentLike()"></image>
        </view>
      </view>
      <view class="content">{{ commentList.content }}</view>
      <u-grid :border="false">
        <u-grid-item v-for="(item,fileIndex) in commentList.fileList"
                     :key="fileIndex"
                     @tap.stop="sendFileList(fileIndex)">
          <navigator url="/pages/index/fullScreen" animation-type="">

            <image v-if="isImageUrl(item)"
                   class="file-item-multi"
                   lazy-load
                   :src="item">
              <template v-slot:loading>
                <up-loading-icon></up-loading-icon>
              </template>
              <template #error>
                <view style="font-size: 24rpx;">加载失败</view>
              </template>
            </image>
            <video v-if="isVideoUrl(item)"
                   object-fit="cover"
                   style="position: relative;"
                   :enable-progress-gesture="false"
                   :vslide-gesture-in-fullscreen="false"
                   :show-fullscreen-btn="false"
                   :show-center-play-btn="false"
                   :show-play-btn="false"
                   class="file-item-multi" :src="item.fileList">
              <cover-image
                  class="play-btn"
                  src="https://www.douluodalu.icu:9000/school/static/play_white.png">
              </cover-image>
            </video>
          </navigator>

        </u-grid-item>
      </u-grid>
    </view>
    <view scroll-y
          :scroll-top="scrollTop"
          scroll-with-animation
          style="height: calc(100vh - env(safe-area-inset-bottom))">
      <view v-if=" commentList.child != undefined" class="sort-button" @tap="getCommentSort"
            style="display: flex;align-items: center;
            justify-content: space-between;padding: 30rpx 30rpx 0 30rpx">
        <text style="color: black">回复</text>
        <view v-if="commentSort" style="display: flex;align-items: center">
          <text>时间</text>&nbsp;
          <image style="width: 15px;height: 15px;" src="https://www.douluodalu.icu:9000/school/static/sort-time.png"></image>
        </view>
        <view v-else style="display: flex;align-items: center">
          <text>热度</text>&nbsp;
          <image style="width: 15px;height: 15px;" src="https://www.douluodalu.icu:9000/school/static/sort-hot.png"></image>
        </view>
      </view>
      <view class="all-reply" >
        <view>
          <childComment class="child"
                        v-if="commentList.child != undefined"
                        @handleRemove.stop="handleRemove"
                        :childCommentList="commentList.child"
                        :parentId="commentList.id"
                        :ancestorId="commentList.id"
                        :level="1"
                        :parentName="commentList.username"
                        :focusedCommentId="focusedCommentId"
          />
          <view style="border-left: 1px solid rgba(192,192,192,0.44);
          border-bottom:  1px solid rgba(192,192,192,0.44);width: 64rpx;height: 120rpx;">

          </view>
        </view>
        <!--    空评论页面-->
        <view v-if="showEmptyComent" class="empty-comment">
          <image src="https://www.douluodalu.icu:9000/school/static/empty.png" style="width: 20vh;height: 20vh;">
          </image>
          <text>做ta的第一个暖场嘉宾</text>
          <!--评论页面-->
        </view>
        <view style="height: 50px"></view>
      </view>
    </view>
  </view>
  <!--      底部评论输入框-->
  <view class="bottom-list" :style="{bottom: keyboardHeight + 'px'}">
    <scroll-view v-if="fileList1" :scroll-x="true" scroll-with-animation>
      <view class="bottom-media-list">
        <view v-for="(item, index) in fileList1"
              @tap.stop="sendFileList2(index)"
              style="position: relative"
              class="bottom-media-list-item" :key="index">
          <navigator url="/pages/index/fileFullScreen">
            <image v-if="isImageUrl(item)"
                   class="bottom-media-list-item-image"
                   :src="item">

            </image>

            <video
                v-else
                :enable-progress-gesture="false"
                :vslide-gesture-in-fullscreen="false"
                :show-fullscreen-btn="false"
                :show-center-play-btn="false"
                :show-play-btn="false"
                class="bottom-media-list-item-image" :src="item">+
            </video>
            <view @tap.stop="deletePic(index)" class="close-images">
              <u-icon color="#fa4358"
                      name="close-circle-fill">
              </u-icon>
            </view>
          </navigator>
        </view>
      </view>
    </scroll-view>
    <view class="textarea-model-wrapper">
      <textarea
          v-model="commentForm.content"
          fixed
          :focus="textareaFocus"
          style="width: 65vw"
          :show-confirm-bar="false"
          :adjust-position="false"
          :placeholder="textareaPlaceholder"
          @focus="getKeyboardHeight"
          @blur="removeKeyboardHeight"
          @input="onTextareaInput"
          maxlength="-1"
          auto-height
      ></textarea>
      <image @click="getMedia(item.type)"
             style="  padding: 0.2rem;width: 1.5rem;height: 1.5rem;margin: 0.5vw"
             :src="item.url"
             border="none"
             :key="item.type" v-for="(item,index) in bottomList">
      </image>
      <button class="send-btn"
              :disabled="commentForm.content.trim() == '' && !fileList1.length > 0"
              @click="send(sendTrigger)">
        发送
      </button>
    </view>
    <u-action-sheet cancelText="取消" @close="closeRemoveAction"
                    @select="selectClick"
                    :closeOnClickOverlay="true"
                    :actions="removeActionList"
                    :round="10"
                    :show="showRemove"></u-action-sheet>
  </view>

</template>

<script>

import {
  addComment,
  deletePic,
  getCommentList,
  likeComment,
  removeCommentById,
  selectSchoolCommentById
} from "@/api/comment";
import ChildComment from "@/components/comment/childComment.vue";
import ReplySkeleton from "@/components/skeleton/replySkeleton.vue";
import {getToken, getUserId} from "@/utils/auth";
import authorize from "@/utils/authorize";

export default {
  components: {ReplySkeleton, ChildComment},
  props: ['comment'],
  data() {
    return {
      showSkeleton: false,
      showRemove: false,
      removeItem:{},
      removing: false,
      removeActionList: [{
        name:'删除',
      }],
      topicInfo: '',
      showTopicPopup: false,
      closeTopicTag: true,
      tempFilePaths: [],
      fileList1: [],
      showSortButton: false, // 控制排序按钮显示与隐藏
      commentSort: false,
      scrollTop: 0,
      sendTrigger: 'comment',
      textareaPlaceholder: `良言一句三冬暖`,
      focusShow: false,
      textareaWidth: 65,
      textareaFocus: false,
      showEmptyComent: false,
      tempComment: [],
      maxHeight: '20px',
      maxLines: 4,
      showReplyPopup: false,
      //键盘高度
      keyboardHeight: 0,
      keyboardHeight1: 0,
      bottomList: [
        {
          url: 'https://www.douluodalu.icu:9000/school/static/post_image.png',
          type: 1
        }
      ],
      bottomList2: [{
        url: 'https://www.douluodalu.icu:9000/school/static/post_image.png',
        type: 1
      },
        //   {
        //   url: 'https://www.douluodalu.icu:9000/school/static/post_emoj.png',
        //   type: 4
        // }, {
        //   url: 'https://www.douluodalu.icu:9000/school/static/aite.png',
        //   type: 5
        // }
      ],
      // 聊天框距离底部的高度
      bottomHeight: 0,
      childCommentInfo: [],
      commentForm: {
        content: '', // 内容
        images: '', // 图片
        videos: '', // 视频
        parentId: '',
        postId: '',
        rootCommentId: '',
      },
      show: false,
      loading: true,
      commentIndex: 0,
      current: 0,
      commentType: [
        { type: 1, name: "最热评论", url: "https://www.douluodalu.icu:9000/school/static/hot-comment.png" },
        {type: 2, name: '最新评论', url: 'https://www.douluodalu.icu:9000/school/static/new-comment.png'},
        {type: 3, name: '只看楼主', url: 'https://www.douluodalu.icu:9000/school/static/only-comment.png'},
        {type: 4, name: '有视频', url: 'https://www.douluodalu.icu:9000/school/static/video-comment.png'}
      ],
      channelInfo: {},
      commentList: {},
      postInfo: {},
      searchParams: {
        hot: true,
        latest: false,
        onlyOwner: false,
        haveVideo: false,
        pageSize: 15,
        current: 1,
        postId: '',
      },
      focusedCommentId: ''

    };
  },
  mounted() {
  },
  unmounted() {
    // 移除监听事件
  },
  onLoad(options) {
    this.getComment(options.id);
    this.scrollToTarget()
    this.focusedCommentId = options.commentId
  },
  onPageScroll(e) {
    // uni.createSelectorQuery().select('.sort-button').boundingClientRect((rect) => {
    //   // 如果按钮在页面外部，则显示按钮；否则，隐藏按钮
    //   let btnHeight = uni.getSystemInfoSync().windowHeight;
    let scrollTop = e.scrollTop;
    this.showSortButton = scrollTop > 250
    // }).exec();
  },
  methods: {
    handleRemove(item,index,ancestorId){
      this.removing = true
      let userId = getUserId();
      if ( item.userId == userId) {
        this.showRemove = true
        this.removeItem.item = item
        this.removeItem.index = index
        this.removeItem.ancestorId = ancestorId
      }
    },
    async selectClick(index){
      if(index?.name === '删除'){
        let _this = this
        uni.showModal({
          title: '提示',
          content: '内容删除后无法找回，是否确认删除？',
          success: async  (res) => {
            if (res.confirm) {
              const response = await removeCommentById(_this.removeItem.item.id,_this.removeItem.ancestorId)
              if (response.code == 200 && response?.data == true) {
                this.deleteCommentById(_this.removeItem.item.id,this.commentList.child)
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                });
              } else {
                uni.showToast({
                  title: response?.data === undefined ? '删除失败' : response?.data,
                  icon: 'none'
                });
              }
              _this.showRemove = false

            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      }
      this.removing = false
    },
    deleteCommentById(id, commentArray) {
      for (let i = 0; i < commentArray.length; i++) {
        if (commentArray[i].id === id) {
          commentArray.splice(i, 1);
          return;
        } else if (Array.isArray(commentArray[i].child)) {
          this.deleteCommentById(id, commentArray[i].child);
        }
      }
    },
    closeRemoveAction(){
      // this.removeItem = {}
      this.showRemove = false
      this.removing = false

    },
    scrollToTarget() {
      // 获取目标组件的位置信息
      // const query = uni.createSelectorQuery().in(this);
      // query
      //     .select(".child")
      //     .boundingClientRect((data) => {
      //       console.log("得到布局位置信息" + JSON.stringify(data));
      //       console.log("节点离页面顶部的距离为" + data.top);
      //
      //     })
      //     .exec();
      // uni.pageScrollTo({
      //   selector: '.child', // 如果是垂直滚动，设置scrollTop为顶部坐标
      //   duration: 100 // 滚动动画持续时间，单位ms
      // });
      // 调用 uni.pageScrollTo 进行页面滚动

    },
    toUserInfo(userId){
      uni.navigateTo({
        url: '/pages/my/userInfo?id=' + userId
      })
    },
    async getRootCommentLike() {
      let token = getToken();
      if (!(token !== null && token !== '' && token !== undefined)) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({url: '/pages/my/login'})
        }, 500)
        return;
      }
      const res = await likeComment(this.commentList.id)
      this.commentList.isLiked = !this.commentList.isLiked;
      if (this.commentList.isLiked) {
        this.commentList.liked++;
      } else {
        this.commentList.liked--;
      }
    },
    async getLike(index) {
      let token = getToken();
      if (!(token !== null && token !== '' && token !== undefined)) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({url: '/pages/my/login'})
        }, 500)
        return;
      }
      const res = await likeComment(this.commentList.child[index].id)
      this.commentList.child[index].isLiked = !this.commentList.child[index].isLiked;
      if (this.commentList.child[index].isLiked) {
        this.commentList.child[index].liked++;
      } else {
        this.commentList.child[index].liked--;
      }
    },
    async deletePic(index) {
      if (this.fileList1?.length > 0) {
        let data = [this.fileList1[Number(index)]]
        const res = await deletePic(data)
        this.fileList1.splice(index, 1)
      }

    },
    sendFileList(fileIndex) {
      setTimeout(() => {
        this.commentList.title = this.commentList.content
        uni.$emit('sendFileList', {
          post: this.commentList,
          fileList: this.commentList.fileList,
          currentIndex: fileIndex
        })
      }, 500)

    },
    sendFileList2(currentIndex) {
      setTimeout(() => {
        uni.$emit('sendFileList', {
          fileList: this.fileList1,
          currentIndex: currentIndex
        })
      }, 500)

    },
    isImageUrl(url) {
      const dotIndex = url.lastIndexOf(".");
      // 截取路径的扩展名
      const extension = url.substring(dotIndex);
      // 判断扩展名是否是图片扩展名
      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tif', '.tiff'];
      return imageExtensions.includes(extension);
    },
    // 新增图片
    uploadFile(tempFilePaths) {
      uni.uploadFile({
        url: this.$BASE_UPLOAD, //仅为示例，非真实的接口地址
        filePath: tempFilePaths,
        // filePath: tempFilePaths[i],
        name: 'file',
        header: {
          'Authorization': getToken(),
        },
        success: (uploadFileRes) => {
          let res = (JSON.parse(uploadFileRes.data)).data.url
          this.fileList1.push(res)
          console.log(res)
          console.log(this.fileList1)
          this.textareaFocus = true
        }
      })
    },

    isVideoUrl(url) {
      const dotIndex = url.lastIndexOf(".");
      // 截取路径的扩展名
      const extension = url.substring(dotIndex);
      // 判断扩展名是否是图片扩展名
      let videoExtensions = [".3gp", ".avi", ".flv", ".mkv", ".mov", ".mpg", ".mp4", ".rmvb", ".wmv"];
      return videoExtensions.includes(extension) && url.startsWith("http");
    },
    getMedia(type) {
      let _this = this
      if (type === 1 || type === 2) {
        if (this.fileList1.length >= 9) {
          uni.showToast({
            title: '最多上传9张图片哦',
            icon: 'none',
            duration: 2000
          })
          return
        }
        this.$authorize('camera', false, true).then(() => {
          //成功授权后相应逻辑
          if (type === 1) {
            uni.chooseMedia({
              count: 9 - this.fileList1.length,
              mediaType: ['image'],
              //可以指定是原图还是压缩图，默认二者都有
              sourceType: ['camera', 'album'], //从相册选择
              success: res => {
                res.tempFiles.forEach(item => {
                  _this.uploadFile(item.tempFilePath)
                })
                if (_this.fileList1.length > 9) {
                  _this.fileList1.splice(9, _this.fileList1.length - 9);
                  uni.showToast({
                    title: '最多选择九个哦',
                    icon: 'none',
                    duration: 2000
                  })
                }
              }
            });
          }
          if (type === 2) {
            uni.chooseMedia({
              count: 9 - this.fileList1.length,
              mediaType: ['video'],
              sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
              sourceType: ['camera', 'album'], //从相册选择
              success: function (res) {
                res.tempFiles.forEach(item => {
                  _this.uploadFile(item.tempFilePath)
                })
                if (_this.fileList1.length > 9) {
                  _this.fileList1.splice(9, _this.fileList1.length - 9);
                  uni.showToast({
                    title: '最多选择九个哦',
                    icon: 'none',
                    duration: 2000
                  })
                }
              }
            });
          }
        }).catch(() => {
          uni.showToast({title: '请先授权相机权限'})
        }).finally(() => {
          //无论授权成功或者失败都执行的逻辑
        });
      }
      if (type === 3) {
        authorize('record', false, true).then(() => {
          this.keyboardHeight = this.keyboardHeight1;
          //成功授权后相应逻辑
        }).catch(() => {
          //拒绝授权后相应逻辑
          uni.showToast({title: '请先授权麦克风权限'})
        }).finally(() => {
          //无论授权成功或者失败都执行的逻辑
        });
      }
      if (type === 4) {
        this.recordClose()
        this.keyboardHeight = this.keyboardHeight1;
        uni.showToast({title: '表情功能正在开发中'})
      }
      if (type === 5) {
        uni.showToast({title: '@功能正在开发中'})
      }
      if (type === 6) {
        uni.showToast({title: '收藏功能正在开发中'})
      }
    },
    send(trigger) {
      let token = getToken();
      if (!(token !== null && token !== '' && token !== undefined)) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({url: '/pages/my/login'})
        }, 500)
        return;
      }
      if (trigger == 'comment') {
        this.sendComment()
      } else {
        this.sendCommentReply()
      }
    },
    async sendComment() {
      let token = getToken();
      if (!(token !== null && token !== '' && token !== undefined)) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({url: '/pages/my/login'})
        }, 500)
        return;
      }
      if ((this.commentForm.content.trim() == '' && !this.fileList1) || (this.commentForm.content.trim().length == 0 && !this.fileList1)) {
        uni.showToast({
          title: '你还没有输入评论',
          icon: 'none'
        })
        return
      }
      if (this.fileList1.length > 0) {
        this.commentForm.images = []
        this.commentForm.videos = []
        this.fileList1.forEach(item => {
          if (this.isImageUrl(item)) {
            this.commentForm.images.push(item)
          } else {
            this.commentForm.videos.push(item)
          }
        })
      }
      if (this.commentForm.images.length > 0) {
        this.commentForm.images = this.commentForm.images.join(',')
      } else {
        this.commentForm.images = null
      }
      if (this.commentForm.videos.length > 0) {
        this.commentForm.videos = this.commentForm.videos.join(',')
      } else {
        this.commentForm.videos = null
      }
      this.commentForm.postId = this.commentList.postId
      this.commentForm.parentId = this.commentList.id
      this.commentForm.rootCommentId = this.commentList.id
      const res = await addComment(this.commentForm)
      if(res.code == 200 && res.data?.id !== undefined){
        uni.pageScrollTo({
          scrollTop: 0, // 设置滚动到顶部的位置
          duration: 100 // 滚动动画时长，单位 ms
        });
        await this.$nextTick(() => {
          this.commentSort = true
          this.getComment(this.commentList.id)
        })
      }else {
        uni.showToast({
          title: res.data,
          icon: 'none',
          duration: 2000
        })
      }
      this.tempFilePaths = []
      this.fileList1 = []
      this.scrollTop = this.scrollTop === 0 ? -1 : 0;
      this.commentForm.content = ''
      this.commentForm.videos = []
      this.commentForm.images = []
      this.commentForm.parentId = ''
      this.commentForm.rootCommentId = ''
      this.commentForm.postId = ''
      this.showEmptyComent = false
      this.focusShow = false

    },
    async sendCommentReply() {
      let token = getToken();
      if (!(token !== null && token !== '' && token !== undefined)) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({url: '/pages/my/login'})
        }, 500)
        return;
      }
      if ((this.commentForm.content.trim() == '' && !this.fileList1) || (this.commentForm.content.trim().length == 0 && !this.fileList1)) {
        uni.showToast({
          title: '你还没有输入评论',
          icon: 'none'
        })
        return
      }
      if (this.fileList1.length !== 0) {
        this.commentForm.images = []
        this.commentForm.videos = []
        this.fileList1.forEach(item => {
          if (this.isImageUrl(item)) {
            this.commentForm.images.push(item)
          } else {
            this.commentForm.videos.push(item)
          }
        })
        if (this.commentForm.images.length > 0) {
          this.commentForm.images = this.commentForm.images.join(',')
        } else {
          this.commentForm.images = null
        }
        if (this.commentForm.videos.length > 0) {
          this.commentForm.videos = this.commentForm.videos.join(',')
        } else {
          this.commentForm.videos = null
        }
      }
      if(this.fileList1.length === 0){
        this.commentForm.images = ''
        this.commentForm.videos = ''
      }
      this.commentForm.postId = this.commentList.postId
      const res = await addComment(this.commentForm)
      if(res.code == 200 && res.data?.id !== undefined){
        await this.$nextTick(() => {
          this.commentSort = true
          this.getComment(this.commentList.id)
        })
      }else {
        uni.showToast({
          title: res.data,
          icon: 'none',
          duration: 2000
        })
      }
      this.commentForm.content = ''
      this.tempFilePaths = []
      this.fileList1 = []
      this.commentForm.videos = []
      this.commentForm.images = []
      this.commentForm.parentId = ''
      this.commentForm.rootCommentId = ''
      this.commentForm.postId = ''
      this.showEmptyComent = false
      this.sendTrigger = 'comment'
      this.focusShow = false
      // uni.reLaunch({
      //   url: '/pages/comment/reply?id=' + this.commentList.id
      // })


    },
    reply(comment, index) {
      if(!this.removing){
        this.replyItem = comment
        this.sendTrigger = 'reply'
        this.commentForm.parentId = comment.id
        this.commentForm.rootCommentId = comment.rootCommentId
        this.textareaPlaceholder = `回复 ${comment.username} :`
        this.textareaFocus = true

      }
    },
    getCommentSort() {
      this.commentSort = !this.commentSort
      this.getComment(this.commentList.id)
    },
    async getComment(id) {
      // this.loading = true
      // this.searchParams.postId = this.commentList.id
      const {data: res} = await selectSchoolCommentById(id, this.commentSort);
      let commentData = res[0]
      if (commentData.child == undefined || commentData.child == null) {
        this.showEmptyComent = true
      }
      if (res != null) {
        commentData.fileList = []
        if (commentData.images != undefined && commentData.images != "") {
          let imagesList = commentData.images.split(',');
          commentData.fileList = [...commentData.fileList, ...imagesList]
        }
        if (commentData.videos != undefined && commentData.images != "") {
          let videosList = commentData.videos.split(',');
          commentData.fileList = [...commentData.fileList, ...videosList]
        }
      }
      this.commentList = commentData;
      this.loading = false
    },
    onTextareaInput() {
      // 在这里可以处理行数
    },
    getKeyboardHeight(event) {
      this.keyboardHeight = event.detail.height
      if (this.keyboardHeight < 0) this.keyboardHeight = 0;
      this.focusShow = true
      this.textareaWidth = 80
    },
    removeKeyboardHeight(event) {
      // 在这里可以处理键盘高度
      this.textareaPlaceholder = `回复 ${this.commentList.username} :`,
          this.textareaFocus = false
      this.keyboardHeight = 0
      if (this.keyboardHeight < 0) this.keyboardHeight = 0;
      if (this.fileList1.length > 0) {
        this.focusShow = true
      } else {
        this.focusShow = false
      }
      this.textareaWidth = 65
    },
    // 点赞
    formatTimeAgo(originalTimestamp) {
      const now = new Date();
      const timestampPlus8Hours = new Date(originalTimestamp);
      timestampPlus8Hours.setHours(timestampPlus8Hours.getHours() + 8);

      const timeDifference = now - timestampPlus8Hours;
      const seconds = Math.floor(timeDifference / 1000);
      const minutes = Math.floor(seconds / 60);
      const hours = Math.floor(minutes / 60);
      const days = Math.floor(hours / 24);
      const padZero = (num) => (num < 10 ? `0${num}` : num);

      if (days < 365) {
        if (days == 0) {
          if (hours >= 12) {
            return `${padZero(timestampPlus8Hours.getUTCMonth() + 1)}/${padZero(timestampPlus8Hours.getUTCDate())}`;
          } else if (hours > 0 && hours <= 12) {
            return `${hours}小时前`;
          } else if (minutes >= 1) {
            return `${minutes}分钟前`;
          } else {
            return '刚刚';
          }
        } else if (days == 1) {
          return `昨天 ${timestampPlus8Hours.getHours()}:${('0' + timestampPlus8Hours.getMinutes()).slice(-2)}`;
        } else {
          return `${padZero(timestampPlus8Hours.getUTCMonth() + 1)}/${padZero(timestampPlus8Hours.getUTCDate())}`;
        }
      } else {
        return `${timestampPlus8Hours.getUTCFullYear()}/${padZero(timestampPlus8Hours.getUTCMonth() + 1)}/${padZero(timestampPlus8Hours.getUTCDate())}`;
      }
    },
    formatLocation(location) {
      if (location == null) {
        return '未知';
      }
      location = location.replace(/省|市/g, '');

      return location;
    },
    // 回复列表
    getReply() {
    },
    notifyChoose(index) {
      this.commentIndex = index
      this.show = false
    },
    open() {
    },
    close() {
      this.show = false
    },
  }
};
</script>

<style lang="scss" scoped>
.like-image {
  height: 20px;
  width: 20px;
}

.empty-comment {
  height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgb(192, 192, 192);
}

.bottom-list {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  z-index: 999;
  width: 100vw;
  position: fixed;
  background-color: #fff;
}

.wrap {
  display: flex;
  flex-direction: column;
  background-color: rgb(245, 245, 245);

}

.comment {
  padding: 30rpx;
  font-size: 32rpx;
  background-color: #ffffff;

  .top {
    display: flex;
    justify-content: space-between;
  }

  .left {
    display: flex;

    .heart-photo {
      image {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        background-color: #f2f2f2;
      }
    }

    .user-info {
      margin-left: 10rpx;

      .name {
        color: $u-light-color;
        font-size: 28rpx;
        margin-bottom: 4rpx;
      }

      .date {
        font-size: 20rpx;
        color: $u-light-color;
        display: flex;
        align-items: center;
      }

      .reply {
        font-size: 20rpx;
        color: #9a9a9a;
        background-color: rgba(154, 154, 154, 0.14);
        border: none;
        padding: 2px 5px;
        border-radius: 5px;
        margin-left: 10rpx;
      }
    }
  }

  .right {
    display: flex;
    font-size: 20rpx;
    align-items: center;
    color: #9a9a9a;

    .like {
      margin-left: 6rpx;
    }

    .num {
      font-size: 26rpx;
      color: #9a9a9a;
    }
  }

  .highlight {
    color: #5677fc;

    .num {
      color: #5677fc;
    }
  }
}

textarea {
  background-color: rgba(154, 154, 154, 0.15);
  border-radius: 60rpx;
  padding: 8px;
  max-height: 12vh;
}

.all-reply {

  .all-reply-top {
    margin-left: 20rpx;
    padding-left: 20rpx;
    border-left: solid 4rpx #5677fc;
    font-size: 30rpx;
    font-weight: bold;


  }

  .item {
    border-bottom: solid 2rpx $u-border-color;
    background-color: rgb(245, 245, 245);
  }

  .reply {
    padding: 20rpx;
    background-color: rgb(242, 242, 242);
    border-radius: 12rpx;
    margin: 10rpx 0;

    .username {
      font-size: 24rpx;
      color: #7a7a7a;


    }
  }
}

.file-item-multi {
  //margin-bottom: 0.5rem;
  border-radius: 5px;
  width: 7.5rem;
  height: 7.5rem;
  position: relative;
}

.play-btn {
  width: 30px;
  height: 30px;
  top: 35%;
  left: 35%;
  position: absolute
}

.bottom-media-list {
  display: flex;
  align-items: center;
  margin: 0 30rpx;
  width: max-content;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: 0 0 10px 0px #b7b4b4;
}

.bottom-media-list-item {
  padding: 5px;
}

.bottom-media-list-item-image {
  width: 128rpx;
  height: 128rpx;
  z-index: 99
}

.close-images {
  z-index: 999;
  position: relative;
  left: 3.9rem;
  top: -5.0rem;
  background-color: white;
  border-radius: 50%;
  width: max-content;
  height: max-content;
}

.textarea-model-wrapper {
  display: flex;
  align-items: center;
  margin: 0 30rpx;

}

media {
  padding: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.5vw
}

.send-btn {
  color: #4ea4f9 !important;
  background-color: white !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  padding: 2px;
  margin: 0;
  letter-spacing: 5px;
  box-sizing: unset !important;
  opacity: 1 !important;
}

button[disabled] {
  box-sizing: unset !important;
  background-color: white !important; /* 禁用时的背景颜色 */
  color: rgba(78, 164, 249, 0.69) !important; /* 禁用时的文字颜色 */
}

button::after {
  border: none;
}

</style>
